<template>
  <div>
    <Card>
      <div class="mainPage_top">
        <el-button
          type="success"
          size="medium"
          style="margin-bottom: 0.1rem"
          @click="create"
          >新增类型</el-button
        >
        <!-- <el-button type="primary" @click="create">新增楼层展区</el-button> -->
        <div class="searchBox">
          <el-input
            :style="{ marginRight: '10px' }"
            clearable
            @change="nameChange"
            placeholder="请输入类型名称"
            suffix-icon="el-icon-search"
            v-model="name"
          >
          </el-input>
          <el-input
            :style="{ marginRight: '10px' }"
            clearable
            @change="codeChange"
            placeholder="请输入类型编码"
            suffix-icon="el-icon-search"
            v-model="code"
          >
          </el-input>
        </div>
      </div>
    </Card>
    <Card>
      <el-table v-loading="loading" :data="tableData">
        <template v-for="(item, index) in tableColumn">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :key="index"
            align="center"
          ></el-table-column>
        </template>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0" type="success">正常</el-tag>
            <el-tag v-if="scope.row.status == 1" type="danger">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="360" align="center">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="dict(scope.row)"
              >字典</el-button
            >
            <el-button type="success" size="mini" @click="handel(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="del(scope.row)"
              >删除</el-button
            >
            <!-- <el-button
			        			type="info"
			        			@click="download(scope.row)">导出二维码</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <Page
        show-total
        class="page"
        :total="total"
        :current.sync="current"
        :page-size="size"
        show-elevator
        @on-change="changePage"
      />
    </Card>
    <Modal
      title="类型操作"
      v-model="modal"
      :closable="false"
      :mask-closable="false"
      width="50"
    >
      <!-- <el-dialog
    		:append-to-body="true"
    		:close-on-click-modal="false"
    		title="展览操作"
    		:modal="false"
    		:visible.sync="modal2"
    		width="50%"> -->
      <el-form
        :model="newData"
        :rules="rules"
        ref="ruleForm"
        label-width="140px"
      >
        <el-form-item label="编码" prop="code">
          <el-input
            v-model="newData.code"
            placeholder="请输入唯一编码"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型名称" prop="name">
          <el-input
            v-model="newData.name"
            placeholder="请输入类型名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="newData.remark"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="newData.sort"
            style="width: 100%"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="newData.status" style="width: 100%">
            <template v-for="(item, index) in states">
              <el-option
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit" :loading="loading1"
          >立即提交</el-button
        >
        <el-button type="info" @click="modal = false">关闭</el-button>
      </span>
      <!-- </el-dialog> -->
    </Modal>
    <Modal
      title="字典值操作"
      v-model="modal2"
      :closable="false"
      :mask-closable="false"
      width="50"
    >
      <!-- <el-dialog
    		:append-to-body="true"
    		:close-on-click-modal="false"
    		title="展览操作"
    		:modal="false"
    		:visible.sync="modal2"
    		width="50%"> -->
      <el-form
        :model="newData1"
        :rules="rules1"
        ref="ruleForm1"
        label-width="140px"
      >
        <el-form-item label="编码" prop="code">
          <el-input
            v-model="newData1.code"
            placeholder="请输入唯一编码"
          ></el-input>
        </el-form-item>
        <el-form-item label="字典值" prop="dictValue">
          <el-input
            v-model="newData1.dictValue"
            placeholder="请输入字典值"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="newData1.sort"
            style="width: 100%"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="newData1.status" style="width: 100%">
            <template v-for="(item, index) in states">
              <el-option
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit1" :loading="loading1"
          >立即提交</el-button
        >
        <el-button type="info" @click="modal2 = false">关闭</el-button>
      </span>
      <!-- </el-dialog> -->
    </Modal>
    <Modal
      title="字典值管理"
      v-model="modal1"
      :closable="true"
      :mask-closable="false"
      width="50"
    >
      <Card>
        <div class="mainPage_top">
          <el-button
            type="success"
            size="medium"
            style="margin-bottom: 0.1rem"
            @click="create1"
            >新增字典值</el-button
          >
          <!-- <el-button type="primary" @click="create">新增楼层展区</el-button> -->
          <div class="searchBox">
            <el-input
              :style="{ marginRight: '10px' }"
              clearable
              @change="dictValueChange"
              placeholder="请输入字典值"
              suffix-icon="el-icon-search"
              v-model="dictValue"
            >
            </el-input>
            <el-input
              :style="{ marginRight: '10px' }"
              clearable
              @change="code1Change"
              placeholder="请输入唯一编码"
              suffix-icon="el-icon-search"
              v-model="code1"
            >
            </el-input>
          </div>
        </div>
      </Card>
      <Card>
        <el-table v-loading="loading2" :data="tableData1">
          <template v-for="(item, index) in tableColumn1">
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              :key="index"
              align="center"
            ></el-table-column>
          </template>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 0" type="success">正常</el-tag>
              <el-tag v-if="scope.row.status == 1" type="danger">停用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button type="success" size="mini" @click="handel1(scope.row)"
                >编辑</el-button
              >
              <el-button type="danger" size="mini" @click="del1(scope.row)"
                >删除</el-button
              >
              <!-- <el-button
			        			type="info"
			        			@click="download(scope.row)">导出二维码</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <Page
          show-total
          class="page"
          :total="total1"
          :current.sync="current1"
          :page-size="size1"
          show-elevator
          @on-change="changePage1"
        />
      </Card>
       <span slot="footer" class="dialog-footer">
      </span>
    </Modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableColumn: [
        {
          prop: 'code',
          label: '编码'
        },
        {
          prop: 'name',
          label: '类型名称'
        },
        {
          prop: 'remark',
          label: '备注'
        },
        {
          prop: 'sort',
          label: '排序'
        }
      ],
      tableColumn1: [
        {
          prop: 'code',
          label: '编码'
        },
        {
          prop: 'dictValue',
          label: '字典值'
        },
        {
          prop: 'remark',
          label: '备注'
        },
        {
          prop: 'sort',
          label: '排序'
        }
      ],
      loading: false,
      loading1: false,
      loading2: false,
      current: 1,
      size: 10,
      total: 0,
      current1: 1,
      size1: 10,
      total1: 0,
      code: '',
      name: '',
      id: '',
      tableData: [],
      tableData1: [],
      states: [
        {
          name: '正常',
          id: '0'
        },
        {
          name: '停用',
          id: '1'
        }
      ],
      newData: {
        code: '',
        name: '',
        remark: '',
        sort: 0,
        status: '0'
      },
      newData1: {
        code: '',
        dictValue: '',
        sort: 0,
        status: '0'
      },
      id1: '',
      modal: false,
      modal1: false,
      modal2: false,
      dictValue: '',
      code1: '',
      typeId: ''
    }
  },
  created () {
    this.getSysDictTypeList()
  },
  methods: {
    getSysDictTypeList () {
      this.loading = true
      this.$http(
        '/chongqing/stage/sysDictType/getSysDictTypeList',
        {
          current: this.current,
          size: this.size,
          code: this.code,
          name: this.name
        },
        'post',
        (res) => {
          console.log(res)
          if (res.data.code == 1000) {
            this.tableData = res.data.data.records
            this.total = res.data.data.total
          } else {
            this.$Message.error(res.data.msg)
          }
          this.loading = false
        }
      )
    },
    changePage (data) {
      console.log(data)
      this.current = data
      this.getSysDictTypeList()
    },
    create () {
      this.id = ''
      this.newData = {
        code: '',
        name: '',
        remark: '',
        sort: 0,
        status: '0'
      }
      this.modal = true
    },
    create1 () {
      this.id = ''
      this.newData1 = {
        code: '',
        dictValue: '',
        sort: 0,
        status: '0'
      }
      this.modal2 = true
    },
    submit () {
      this.loading1 = true
      if (this.id == '') {
        this.$http(
          '/ztmuseum/stage/sysDictType/addSysDictType',
          {
            code: this.newData.code,
            name: this.newData.name,
            remark: this.newData.remark,
            sort: this.newData.sort,
            status: this.newData.status
          },
          'post',
          (res) => {
            if (res.data.code == 1000 && res.data.data) {
              this.$Message.success('新增成功')
              this.modal = false
              this.getSysDictTypeList()
            } else {
              this.$Message.error(res.data.msg)
            }
            this.loading1 = false
          }
        )
      } else {
        this.$http(
          '/chongqing/stage/sysDictType/updateSysDictType',
          {
            code: this.newData.code,
            name: this.newData.name,
            remark: this.newData.remark,
            sort: this.newData.sort,
            status: this.newData.status,
            id: this.id
          },
          'post',
          (res) => {
            if (res.data.code == 1000 && res.data.data) {
              this.$Message.success('编辑成功')
              this.modal = false
              this.current = 1
              this.getSysDictTypeList()
            } else {
              this.$Message.error(res.data.msg)
            }
            this.loading1 = false
          }
        )
      }
    },
    submit1 () {
      this.loading1 = true
      if (this.id == '') {
        this.$http(
          '/chongqing/stage/sysDictType/addSysDictData',
          {
            code: this.newData1.code,
            dictValue: this.newData1.dictValue,
            typeId: this.typeId,
            sort: this.newData1.sort,
            status: this.newData1.status
          },
          'post',
          (res) => {
            if (res.data.code == 1000 && res.data.data) {
              this.$Message.success('新增成功')
              this.modal2 = false
              this.getSysDictDataList()
            } else {
              this.$Message.error(res.data.msg)
            }
            this.loading1 = false
          }
        )
      } else {
        this.$http(
          '/ztmuseum/stage/sysDictType/updateSysDictData',
          {
            code: this.newData1.code,
            dictValue: this.newData1.dictValue,
            sort: this.newData1.sort,
            status: this.newData1.status,
            id: this.id
          },
          'post',
          (res) => {
            if (res.data.code == 1000 && res.data.data) {
              this.$Message.success('编辑成功')
              this.modal2 = false
              this.current1 = 1
              this.getSysDictDataList()
            } else {
              this.$Message.error(res.data.msg)
            }
            this.loading1 = false
          }
        )
      }
    },
    handel (data) {
      this.id = data.id
      this.newData = {
        code: data.code,
        name: data.name,
        remark: data.remark,
        sort: data.sort,
        status: String(data.status)
      }
      this.modal = true
    },
    handel1 (data) {
      console.log(data)
      this.id = data.id
      this.newData1 = {
        code: data.code,
        dictValue: data.dictValue,
        sort: data.sort,
        status: String(data.status)
      }
      this.modal2 = true
    },
    nameChange () {
      this.current = 1
      this.getSysDictTypeList()
    },
    codeChange () {
      this.current = 1
      this.getSysDictTypeList()
    },
    del (data) {
      this.$confirm('此操作将删除该字典类型，请谨慎操作，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose: false,
        type: 'warning'
      })
        .then(() => {
          this.$http(
            '/chongqing/stage/sysDictType/deleteSysDictType',
            {
              id: data.id
            },
            'post',
            (res) => {
              if (res.data.code == 1000 && res.data.data) {
                this.$Message.success('删除成功')
                this.current = 1
                this.getSysDictTypeList()
                // this.getBottomExhibitionHallDropDown()
              } else {
                this.$Message.error(res.data.msg)
              }
              // this.modal = false
            }
          )
        })
        .catch(() => {})
    },
    del1 (data) {
      this.$confirm('此操作将删除该字典值，请谨慎操作，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose: false,
        type: 'warning'
      })
        .then(() => {
          this.$http(
            '/chongqing/stage/sysDictType/deleteSysDictData',
            {
              id: data.id
            },
            'post',
            (res) => {
              if (res.data.code == 1000 && res.data.data) {
                this.$Message.success('删除成功')
                this.current1 = 1
                this.getSysDictDataList()
                // this.getBottomExhibitionHallDropDown()
              } else {
                this.$Message.error(res.data.msg)
              }
              // this.modal = false
            }
          )
        })
        .catch(() => {})
    },
    dict (data) {
      this.modal1 = true
      this.typeId = data.id
      this.getSysDictDataList()
    },
    getSysDictDataList () {
      this.loading2 = true
      this.$http('/chongqing/stage/sysDictType/getSysDictDataList', {
        code: this.code1,
        current: this.current1,
        size: this.size1,
        dictValue: this.dictValue,
        typeId: this.typeId
      }, 'post', (res) => {
        if (res.data.code == 1000) {
          this.tableData1 = res.data.data.records
          this.total1 = res.data.data.total
        } else {
          this.$Message.error(res.data.msg)
        }
        this.loading2 = false
      })
    },
    changePage1 (data) {
      this.current1 = data
      this.getSysDictDataList()
    },
    dictValueChange () {
      this.current1 = 1
      this.getSysDictDataList()
    },
    code1Change () {
      this.current1 = 1
      this.getSysDictDataList()
    }

  }
}
</script>

<style scoped>
.mainPage_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.searchBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
